
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head >
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理登录</title>
    <link rel="stylesheet" type="text/css" href="../static/css/login.css" th:href="@{/css/login.css}" />
</head>

<body>
<div class="container">
    <div class="form-box">
        <form method="post" action="#" th:action="@{/register}" class="text2">
          <!--为空时错误提示   -->
            <div id="messageContainer" th:if="${message}">
                <p th:text="${message}" class="error-message"></p>
            </div>

            <!-- 注册 -->
        <div class="register-box hidden">
            <h1>register</h1>
            <input type="text" name="username" placeholder="username">
            <input type="text" name="email" placeholder="email"> <!-- 新增邮箱输入框 -->
            <input type="password" name="password" placeholder="password">
            <input type="password" name="confirmPassword" placeholder="confirm password">
            <button class="btn submit">create account </button>

        </div>
        </form>

        <form method="post" class="text" action="#" th:action="@{/login}">
        <!-- 登录 -->
        <div class="login-box">
            <h1>login</h1>
            <input type="text" name="username" placeholder="username">
            <input type="password" name="password" placeholder="password">
            <div class="checkbox">
                <input type="checkbox" id="remember" /><label for="remember">remember me</label>
            </div>
            <button class="btn submit">login</button>
        </div>
        </form>

    </div>
    <div class="con-box left">

        <h2 class="title"><span>Personal</span>&<br>Blog</h2>
        <p class="desc">Record your life<span> - at [blog].</span></p>
        <img class="flower smaller" src="../static/images/yixiaoxing.jpg" th:src="@{/images/yixiaoxing.jpg}" border="1px">

        <p class="account">have an account?</p>
        <button class="buttonx" id="login">login</button>


    </div>
    <div class="con-box right">
        <h2 class="title"><span>Personal</span>&<br>Blog</h2>
        <p class="desc">Share your thoughts <span> - at [blog]</span></p>
        <img class="flower smaller" src="../static/images/avatar.jpg" th:src="@{/images/avatar.jpg}" border="1px">
        <p class="account">don't have an account?</p>
        <button class="buttonx" id="register">sign up</button>
    </div>
</div>
<script src="../static/js/Login.js" th:src="@{/js/Login.js}"></script>
<script th:inline="javascript">
    const errorMessage = /*[[${message}]]*/ '';
</script>
</body>

</html>